<template>
	<view class="login-container">
		<view class="login-card">
			<view class="title">
				登陆
			</view>
			<view class="row">
				<view class="">
					用户名：
				</view>
				<input type="text" v-model="formData.username" />
			</view>
			<view class="row">
				<view class="">
					密码：
				</view>
				<input type="password" v-model="formData.password" />
			</view>
			<button @click="login">登陆</button>
			<view class="a" @click.prevent="goRegister">注册</view>
		</view>
	</view>
</template>

<script>
export default {
	created() {
		// 如果已经登陆，直接跳转到首页
		const token = uni.getStorageSync('token');
		if (token) {
			uni.switchTab({ url: '/pages/index/index' });
		}
	}
};
</script>
<script setup>
import { ref } from 'vue';
import { useUserStore } from '../../store/User';

const userStore = useUserStore();

const formData = ref({
	username: '',
	password: ''
});

const goRegister = () => {
	uni.navigateTo({ url: '/pages/register/register' });
};

const login = () => {
	// 进行表单验证
	if (!formData.value.username || !formData.value.password) {
		uni.showToast({
			title: '用户名和密码不能为空',
			icon: 'error'
		});
		return;
	}
	if (formData.value.password.length < 6) {
		uni.showToast({
			title: '密码不能少于6位',
			icon: 'error'
		});
		return;
	}
	// 发送登陆请求
	uniCloud.callFunction({
		name: 'login',
		data: formData.value,
		success: res => {
			if (res.result.code === 1) {
				uni.showToast({
					title: res.result.msg,
					icon: 'error'
				});
				return;
			}

			// 直接保存用户信息和 token
			const userInfo = res.result.data;
			const token = res.result.token;

			// 保存信息
			uni.setStorageSync('token', token);
			const { encryptedString, ...info } = userInfo;
			uni.setStorageSync('userInfo', info);

			// 跳转到首页
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			});
			uni.switchTab({ url: '/pages/index/index' });
		}
	});
};
</script>

<style scoped lang="scss">
.login-container {
	width: 100%;
	height: 100vh;
	position: relative;
	background-color: #fff;
	overflow: hidden;
	background: url("https://mp-15ab7795-d8b1-4b2f-a41e-493ce57cc1e7.cdn.bspapp.com/images/glass.png") 50% 50% no-repeat;
	background-size: cover;

	.title {
		font-size: 60rpx;
		font-weight: 700;
		text-align: center;
		margin-bottom: 60rpx;
		color: #007aff;
	}

	.login-card {
		width: 600rpx;
		height: 700rpx;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 50rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx 4rpx #ccc;

		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			view {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
			}

			input {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				border: 2px solid #ccc;
				border-radius: 20rpx;
			}

		}

		button {
			width: 400rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #007aff;
			color: #fff;
			border-radius: 20rpx;
		}

		.a {
			width: 400rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 auto;
			color: #007aff;
			margin-top: 20rpx;
			display: block;
			text-align: center;
			font-size: 32rpx;
		}
	}
}
</style>